<template>
  <p>Popular Tags</p>

  <div class="tag-list">
    <a
      href=""
      class="tag-pill tag-default"
      v-for="(tag, index) in tags"
      :key="index"
    >{{ tag }}</a>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { getTags } from '@/api/tag'

export default {
  name: 'TagList',
  setup () {
    const tags = ref([])
    const loadTags = async () => {
      const { data } = await getTags()
      tags.value = data.tags
    }
    onMounted(loadTags)
    return {
      tags
    }
  }
}
</script>

<style>
</style>
